<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>安检单-用户信息</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
				<script src="../js/jquery-1.8.3.js"></script>
		<style>
			html,
			body,
			.mui-content {
				height: 0px;
				margin: 0px;
				/*background-color: #efeff4;*/
			}
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			.mui-btn {
				font-size: 16px;
			/*	padding: 8px;
				margin: 3px;
				*/
			}
			.mui-input-row {
 			  width: 120%;
			}
			
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
			* {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			p {
				text-indent: 22px;
			}
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
			#info {
				padding: 20px 10px;
			}
			.des {
				margin: .5em 0;
			}
			.des>li {
				font-size: 14px;
				color: #8f8f94;
			}
			.mui-switch.mui-active:before{
				content:'是';
			}
			.mui-switch:before {
    			content: '否';
			}
			.mui-switch.mui-active-ugas:before{
				right:auto;
				left:15px;
				content:'左进气';
				color:#fff;
			}
			.mui-switch.mui-active-check:before{
				right:auto;
				left:15px;
				content:'联动';
				color:#fff;
			}
				.mui-switch.mui-active-has:before{
				right:auto;
				left:15px;
				content:'有';
				color:#fff;
			}	
				.mui-table-view-cell{
				   height: 60px;
    			  padding: 8px 10px;
			}	
				.mui-input-row label {
			    padding: 6px 7px;
			 }
			
		</style>
		<script type="text/javascript">
	var localDatabase = {};
	var dbName = "msgDb";//数据库名字
	var storeName = "MsgInfo";//存储空间名字
	var version = 1;//版本号
	var totalMsg = 0;// 消息数量
	localDatabase.indexedDB = window.indexedDB || window.mozIndexedDB
			|| window.webkitIndexedDB || window.msIndexedDB;//对应浏览器版本
	localDatabase.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;//范围
	localDatabase.IDBTransaction = window.IDBTransaction
			|| window.webkitIDBTransaction;//事务

	localDatabase.indexedDB.onerror = function(e) {
		console.log("Database error: " + e.target.errorCode);
	};


	$(function() {

		var openRequest = localDatabase.indexedDB.open(dbName, 1);

		openRequest.onerror = function(e) {
			console.log("Database error: " + e.target.errorCode);
		};
		openRequest.onsuccess = function(event) {
			console.log("Database created");
			localDatabase.db = openRequest.result;
			var db = event.target.result;
			useDatabase(db);
			var userId = getParameter("userId");
			fetchById(userId);
		};

		//唯一可以修改数据库结构的地方。触发的时机是？
		openRequest.onupgradeneeded = function(evt) {
			console.log("I need to create the objectstore");
			//创建名为storeName变量值的对象存储空间
			var objectStore = evt.currentTarget.result.createObjectStore(
					storeName, {
						keyPath : "userId",
						autoIncrement : true
					});
			objectStore.createIndex("sessionCodeIndex", "sessionCode", {
				unique : false
			});//就是一个索引  但是可以是属性的对象的名字
		};

		//页面加载完成就执行的部分-begin
	
	});
	// 删除数据库
	function delDatabase() {
		console.log('Deleting local database');
		var deleteDbRequest = localDatabase.indexedDB.deleteDatabase(dbName);
		deleteDbRequest.onsuccess = function(event) {
			console.log('Database deleted');
			var openRequest = localDatabase.indexedDB.open(dbName, 1);
		};

		deleteDbRequest.onerror = function(e) {
			console.log("Database error: " + e.target.errorCode);
		};
	}

	// 添加记录
	function add(text) {
		try {
			//readwrite 赋予读写权限
			var transaction = localDatabase.db.transaction(storeName,
					"readwrite");
			var store = transaction.objectStore(storeName);

			if (localDatabase != null && localDatabase.db != null) {

				//var in_txt = $("#txtinput").val();
// 				alert(""+text);
				var in_txt =text;
// 				alert("in:"+in_txt);
				try {
					var in_txt_json = JSON.parse(in_txt);
				} catch (e) {
					alert(e);
					alert("要转换的json字符串格式不正确！！！！！！！！");
					$("#log").append("要转换的json字符串格式不正确！！！！！！！！").append(
							"<br />");
// 					console.log(e);
// 					console.log("要转换的json字符串格式不正确！！！！！！！！");
// 					$("#log").append("要转换的json字符串格式不正确！！！！！！！！").append(
// 							"<br />");
					return;
				}

				var request = store.put(in_txt_json);

				request.onsuccess = function(e) {
// 					console.log("Added " + in_txt);
					alert("保存记录成功 ==> " + in_txt);
					//$("#log").append("插入记录成功 ==> " + in_txt).append("<br />");
				};

				request.onerror = function(e) {
					alert(e.value);
				};

			}

		} catch (e) {
			alert(e);
		}
	}

	//查询记录
	function fetchById(userId) {
		try {
			if (localDatabase != null && localDatabase.db != null) {
				//transaction 不加第二个参数，默认为只读(read-only)权限
				var store = localDatabase.db.transaction(storeName)
						.objectStore(storeName);
// 				store.get(userId).onsuccess = function(event) {
// 					var r_data = event.target.result;
// 					if (r_data == null) {
// 						return "";
// 						//$("#log").append("未查询到记录！").append("<br />");
// 					} else {
// 						var jsonStr = JSON.stringify(r_data);
// 						return jsonStr;
// 					//	$("#log").append("查询记录 ==>" + jsonStr).append("<br />");
// 					}
// 				};
				
				var request = store.get(userId);

				request.onsuccess = function(e) {
					var r_data = event.target.result;
					if (r_data == null) {
						checkValue();
						//return "";
						//$("#log").append("未查询到记录！").append("<br />");
					} else {
						var jsonStr = JSON.stringify(r_data);
						setValue(jsonStr);
// 						return jsonStr;
//						$("#log").append("查询记录 ==>" + jsonStr).append("<br />");
					}
				};

				request.onerror = function(e) {
					console.log(e);
					//$("#log").append("查询出现异常！").append("<br />");
				};
			}
		} catch (e) {
			console.log(e);
		}
	}

	//修改记录
	function updateById() {
		try {
			if (localDatabase != null && localDatabase.db != null) {
				var store = localDatabase.db
						.transaction(storeName, "readwrite").objectStore(
								storeName);
				store.get($("#txtUpdateById").val()).onsuccess = function(event) {
					var r_data = event.target.result;
					if (r_data == null) {
						$("#log").append("未查询到记录！").append("<br />");
					} else {

						// 修改first_name属性值
						r_data.first_name = $("#txtFirstName").val();
						var jsonStr = JSON.stringify(r_data);

						// 将修改后的记录更新到store
						var request = store.put(r_data);

						request.onsuccess = function(e) {
							$("#log").append("修改记录成功 ==> " + jsonStr).append(
									"<br />");
						};

						request.onerror = function(e) {
							$("#log").append("修改记录失败 ==> " + e.value).append(
									"<br />");
							console.log("修改记录失败 ==> " + e.value);
						};
					}
				};
			}
		} catch (e) {
			console.log(e);
		}
	}

	function useDatabase(db) {
		// 确保添加一个如果另一个页面请求一个版本变化时来被通知的处理程序。
		// 我们必须关闭这个数据库。这就允许其他页面对数据库进行升级。
		// 如果你不这么做的话，除非用户关闭标签页否则升级就不会发生。
		db.onversionchange = function(event) {
			db.close();
			alert("A new version of this page is ready. Please reload!");
		};

		// 其他针对数据库的处理
	}

</script>
	</head>
	<body  style="background-color: #FFFFFF;">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">安检单-用户信息</h1>
			<div class="mui-btn mui-btn-primary" style="float: right;">
					修改
				</div>
		</header>
		
		<div class="mui-content">
			<!--
        	作者：lizhutong@ench.cn
        	时间：2015-12-28
        	描述：	<div class="mui-card" style="padding: 10px;">
        -->
        <ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
				<div class="mui-input-row">
						<label>用户编号</label>
						<!--
                        	作者：lizhutong@ench.cn
                        	时间：2015-12-25
                        	描述：
                        	<input id="userId"  disabled="disabled" class="mui-input-clear" placeholder="请输入用户编号" value="2012168793">
						
                        -->
                        <input id="userId" name="canEdit"  disabled="disabled" class="mui-input-clear" placeholder="请输入用户编号" style="margin-top: 7px;">
				</div>
				</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>用户名称</label>
						<input id="userName"  name="canEdit"  type="text"  disabled="disabled" class="mui-input-clear" placeholder="请输入用户名称">
					</div>
						</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>用气地址</label>
						<input id="userADD"  name="canEdit"  type="text"  disabled="disabled" class="mui-input-clear" placeholder=""> 
					</div>
						</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>工作单位</label>
						<input name="canEdit"  type="text"  disabled="disabled" class="mui-input-clear" placeholder="" value=""> 
					</div>
						</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>家庭人口</label>
						<input name="canEdit"  type="text"  disabled="disabled"  class="mui-input-clear" placeholder="" value=""> 
					</div>
						</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>手机号码</label>
						<input id="userTEL"  type="text"  disabled="disabled"  class="mui-input-clear" placeholder=""> 
					</div>
						</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>联系电话</label>
						<input name="canEdit"  type="text"  disabled="disabled"  class="mui-input-clear" placeholder="" value=""> 
					</div>
						</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>用户是否使用燃气</label>
						<div id="M_Toggle" class="mui-switch mui-active" name="canEdit" >
							<div class="mui-switch-handle"></div>
						</div>
					</div>
						</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>预约时间</label>
                        <button name="canEdit"  id='demo1' data-options='{}' class="btn mui-btn" style="width: 30%;">点击选择</button>
						<input id='result'  type="text"  disabled="disabled"  class="mui-input-clear" placeholder="" style="width: 30%;"> 
                        </div>
                        	</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>租户姓名</label>
						<input name="canEdit"  type="text"  disabled="disabled"  class="mui-input-clear" placeholder="" value=""> 
					</div>
						</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>联系电话</label>
						<input name="canEdit"  type="text"  disabled="disabled"  class="mui-input-clear" placeholder="" value=""> 
					</div>
						</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>进气方向</label>
						<div id="M_Toggle" class="mui-switch mui-active" name="canEdit" >
							<div class="mui-switch-handle"></div>
						</div>
					</div>
						</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>购气总量</label>
						<input type="text"  disabled="disabled"  class="mui-input-clear" placeholder="" value="30" style="width: 50%;float: left;">
						<label style="float: right;width: 15%;">m³</label>
					</div> 
						</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>气表编号</label>
						<input name="canEdit"  type="text"  disabled="disabled"  class="mui-input-clear" placeholder="" value=""> 
					</div>
						</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label><font style="color: red;">*</font>气表底数</label>
							<input name="canEdit"  type="text"  disabled="disabled"  class="mui-input-clear" placeholder="" value="" style="width: 50%;float: left;">
						<label style="float: right;width:15%;">m³</label>
					</div>
						</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>用户类别</label>
					<a name="canEdit"  href="#user_type" class="mui-btn" style="width: 30%;">点击选择</a>
					<input id="user_typeinfo" type="text"  disabled="disabled"  class="mui-input-clear" placeholder=""  style="width: 30%;"> 
				</div>
					</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>燃气表厂家</label>
					<a name="canEdit"  href="#gas_factory" class="mui-btn" style="width: 30%;">点击选择</a>
					<input id="gas_factoryinfo" type="text"  disabled="disabled"  class="mui-input-clear" placeholder=""  style="width: 30%;"> 
				</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-input-row">
						<label>燃气表型号</label>
						<a name="canEdit" href="#gas_model" class="mui-btn" style="width: 30%;">点击选择</a>
					<input id="gas_modelinfo" type="text"  disabled="disabled"  class="mui-input-clear" placeholder=""  style="width: 30%;"> 
				</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-input-row">
						<label>报警器厂家</label>
						<a name="canEdit" href="#alarm_factory" class="mui-btn" style="width: 30%;">点击选择</a>
					<input id="alarm_factoryinfo" type="text"  disabled="disabled"  class="mui-input-clear" placeholder=""  style="width: 30%;"> 
				</div>
					</li>
					<li class="mui-table-view-cell">
				<div class="mui-input-row">
						<label>报警器型号</label>
						<a name="canEdit" href="#alarm_model" class="mui-btn" style="width: 30%;">点击选择</a>
					<input id="alarm_modelinfo" type="text"  disabled="disabled"  class="mui-input-clear" placeholder=""  style="width: 30%;"> 
				</div>
					</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>报警器联动情况</label>
						<div name="canEdit"  id="M_Toggle" class="mui-switch mui-active">
							<div class="mui-switch-handle"></div>
						</div>
					</div>
						</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>炉具</label>
						<div name="canEdit"  id="M_Toggle" class="mui-switch mui-active">
							<div class="mui-switch-handle"></div>
						</div>
					</div>
						</li>
					<li class="mui-table-view-cell">
						<div class="mui-input-row">
						<label>电磁阀</label>
						<div name="canEdit"  id="M_Toggle" class="mui-switch mui-active">
							<div class="mui-switch-handle"></div>
						</div>
					</div>
						</li>
					<li class="mui-table-view-cell">
						<div class="mui-input-row">
						<label>热水器</label>
						<div name="canEdit"  id="M_Toggle" class="mui-switch mui-active">
							<div class="mui-switch-handle"></div>
						</div>
					</div>
						</li>
					<li class="mui-table-view-cell">
						<div class="mui-input-row">
						<label>壁挂炉</label>
						<div name="canEdit" id="M_Toggle" class="mui-switch mui-active">
							<div class="mui-switch-handle"></div>
						</div>
					</div>
						</li>
					<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<label>苍南表IP号</label>
						<input name="canEdit"  type="text"  disabled="disabled"  class="mui-input-clear" placeholder="" value=""> 
					</div>
						</li>
					<li class="mui-table-view-cell">
						<div class="mui-input-row">
						<label>暗厨房</label>
						<div name="canEdit" id="M_Toggle" class="mui-switch mui-active">
							<div class="mui-switch-handle"></div>
						</div>
						
					</div>
					</li>
					</ul>
		      	<div class="mui-content-padded">
		        <button type="button" class="mui-btn mui-btn-primary mui-btn-block" style="margin-bottom: 10px;">保存</button>
		       </div>
			<!--
            	作者：lizhutong@ench.cn
            	时间：2015-12-28
            	描述：</div>
            -->
        	</div>
		</div>
		
		<div id="user_type" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#">普通用户</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">高端用户</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">老年用户</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#user_type"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<div id="gas_factory" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#">天鸿</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">苍南</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">思凯</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">威星</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#gas_factory"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<div id="gas_model" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#">苍南</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#gas_model"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<div id="alarm_factory" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#">新天</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">庆仪</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#alarm_factory"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<div id="alarm_model" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#">新天</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#alarm_model"><b>取消</b></a>
				</li>
			</ul>
		</div>
		
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
			<script src="../js/mui.picker.min.js"></script>
	
	<script>
		
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		function setValue(jsonStr){
			//var jsonStr=fetchById(userId);
			//	alert(jsonStr);
				if(typeof(jsonStr)!="undefined"&&jsonStr!=""){
					var in_txt_json = JSON.parse(jsonStr);
					userId=in_txt_json.userId;
					userName=in_txt_json.userName;
					userADD=in_txt_json.userADD;
					userTEL=in_txt_json.userTEL;
				}
				document.getElementById("userId").value=userId;
				document.getElementById("userName").value=userName;
				document.getElementById("userADD").value=userADD;
				document.getElementById("userTEL").value=userTEL;
		}
		function checkValue(){
			var userId = getParameter("userId");
			var userName = getParameter("userName");
			var userADD = getParameter("userADD");
			var userTEL = getParameter("userTEL");
			//alert(userId);
			document.getElementById("userId").value=userId;
			document.getElementById("userName").value=userName;
			document.getElementById("userADD").value=decodeURI(userADD);
			document.getElementById("userTEL").value=userTEL;
		}
		function getParameter(param){
    var query = window.location.search;
    var iLen = param.length;
    var iStart = query.indexOf(param);
    if (iStart == -1)
       return "";
    iStart += iLen + 1;
    var iEnd = query.indexOf("&", iStart);
    if (iEnd == -1)
       return query.substring(iStart); 
    return query.substring(iStart, iEnd);
}

		mui('.mui-left').on('change', 'input', function() {
			var value = this.checked?"true":"false";
			this.previousElementSibling.innerText = "checked："+value;
		});
		mui('body').on('tap', '.mui-popover-action li>a', function() {
			var a = this,
				parent;
			//根据点击按钮，反推当前是哪个actionsheet
			for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
				if (parent.classList.contains('mui-popover-action')) {
					break;
				}
			}
			//关闭actionsheet
			mui('#' + parent.id).popover('toggle');
			var info = document.getElementById(parent.id+"info");
			if("<b>取消</b>"!=a.innerHTML){
				info.value= a.innerHTML ;
			}
		});
		mui('body').on('tap', '.mui-btn-primary', function() {
			//alert("修改");
			var a = this;
			var obs=document.getElementsByName("canEdit");
			for(var i=0; i<obs.length; i++)  
			  {  
			    obs[i].disabled=false; 
			  } 
			//document.getElementById("userId").disabled=false;
		});
		mui('body').on('tap', '.mui-btn-block', function() {
			//alert("保存");
			var a = this;
			var text="{";
			text+="\"userId\":\""+document.getElementById("userId").value+"\",";
			text+="\"userName\":\""+document.getElementById("userName").value+"\",";
			text+="\"userADD\":\""+document.getElementById("userADD").value+"\",";
			text+="\"userTEL\":\""+document.getElementById("userTEL").value+"\"";
			//var obs=document.getElementsByName("canEdit");
			text+="}";
// 			 alert(text);
			 add(text);
		/*
		for(var i=0; i<obs.length; i++)
			  {  
			    //alert(obs[i].innerHTML); 
			    if(typeof(obs[i].value)!="undefined"){
			    	 text=text+obs[i].value+",";
			    }
			 } 
			 alert(text.substr(0,text.length-1));
			 */
		});
		
		function getCurrentTime() {
		var curr_time = new Date();
		var strDate = curr_time.getFullYear() + "-";
		if ("" != curr_time) {
			if (curr_time.getMonth() + 1 < 10) {
				strDate += '0' + (curr_time.getMonth() + 1) + "-";
			} else {
				strDate += curr_time.getMonth() + 1 + "-";
			}

			if (curr_time.getDate() < 10) {
				strDate += '0' + curr_time.getDate() + " ";
			} else {
				strDate += curr_time.getDate() + " ";
			}

			if (curr_time.getHours() < 10) {
				strDate += '0' + curr_time.getHours() + ":";
			} else {
				strDate += curr_time.getHours() + ":"; //获取当前小时数(0-23)
			}
			if (curr_time.getMinutes() < 10) {
				strDate += '0' + curr_time.getMinutes() + ":";
			} else {
				strDate += curr_time.getMinutes() + ":"; //获取当前分钟数(0-59)
			}
		}
		return strDate;
	}
		(function($) {
				$.init();
				var result = $('#result')[0];
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						/*
						 * 首次显示时实例化组件
						 * 示例为了简洁，将 options 放在了按钮的 dom 上
						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
						 */
						var picker = new $.DtPicker(options);
						picker.show(function(rs) {
							/*
							 * rs.value 拼合后的 value
							 * rs.text 拼合后的 text
							 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
							 * rs.m 月，用法同年
							 * rs.d 日，用法同年
							 * rs.h 时，用法同年
							 * rs.i 分（minutes 的第二个字母），用法同年
							 */
							//result.innerText = '选择结果: ' + rs.text;
							var now=getCurrentTime();
							if(now>=rs.text){
								alert("预约时间不可选择当前时间之前");
								return false;
							}else{
								result.value=rs.text;
							}
							/* 
							 * 返回 false 可以阻止选择框的关闭
							 * return false;
							 */
							/*
							 * 释放组件资源，释放后将将不能再操作组件
							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
							 */
							picker.dispose();
						});
					}, false);
				});
			})(mui);
	</script>
	
</html>